<template>
  <div class="page-mobile_withdrawal_log">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      title="提现记录"
    ></white-header>
    <div class="log_list">
      <div class="list_item" v-for="(item,index) in withdrawal_log_list" :key="index">
        <div class="item_left">
          <div>{{$t('locale.mobile.withdrawakLog.t1')}}{{item.withdrawalType|formatWithdrawalType(that)}}</div>
          <div>提现时间：{{trimDate(item.withdrawalTime)}}</div>
          <div>{{$t('locale.mobile.withdrawakLog.t3')}}{{item.payee}}</div>
          <div>{{$t('locale.mobile.withdrawakLog.t4')}}{{item.paymentAccount}}</div>
          <!-- <div class="top">
            <div class="row_left">{{$t('locale.mobile.withdrawakLog.t1')}}{{item.withdrawalType|formatWithdrawalType(that)}}</div>
            <div class="row_right">{{$t('locale.mobile.withdrawakLog.t2')}}{{trimDate(item.withdrawalTime)}}</div>
          </div>
          <div class="bottom">
            <div class="row_left">{{$t('locale.mobile.withdrawakLog.t3')}}{{item.payee}}</div>
            <div class="row_right">{{$t('locale.mobile.withdrawakLog.t4')}}{{item.paymentAccount}}</div>
          </div> -->
        </div>
        <div class="item_right">
          <div class="money">-{{item.withdrawalMoney.toFixed(2)}}</div>
          <div class="status">{{item.status|formatStatus(that)}}</div>
        </div>
      </div>
    </div>
    <div class="footer" v-show="withdrawal_log_list.length != 0">
        <span class="tips">我是有底线的</span>
      </div>
      <van-empty description="暂无用户" v-show="withdrawal_log_list.length == 0" />
  </div>
</template>

<script>
import { getWithdrawalLog } from "~/api/distribution";
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
export default {
  components: {
    WhiteHeader
  },
  scrollToTop: true,
  data() {
    return {
      that:this,
      page: 1,
      pageSize: 15,
      total: 0,
      records: 0,
      withdrawal_log_list: [],
    };
  },
  filters: {
    formatStatus(val,that) {
      switch (val) {
        case 0:
          return that.$t('locale.mobile.withdrawakLog.t6');
        case 1:
          return that.$t('locale.mobile.withdrawakLog.t7');
        case 2:
          return that.$t('locale.mobile.withdrawakLog.t8');
        default:
          return that.$t('locale.mobile.withdrawakLog.t9');
      }
    },
    formatWithdrawalType(val,that) {
      switch (val) {
        case 0:
          return that.$t('locale.mobile.withdrawakLog.t10');
        case 1:
          return that.$t('locale.mobile.withdrawakLog.t11');
        case 2:
          return that.$t('locale.mobile.withdrawakLog.t12');
        default:
          return that.$t('locale.mobile.withdrawakLog.t9');
      }
    },
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
        // return `${_date.getFullYear()}.${_date.getMonth() +
        //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
      } else {
        return this.$t('locale.mobile.withdrawakLog.t9');
      }
    },
    toPath(path) {
      this.$router.push(path);
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight-120) {
        console.log("上拉加载");
        if (this.total <= this.withdrawal_log_list.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        this.getData("pullup");
      }
    },
    eventListener() {
      this.throttle(this.pullUp, 300);
    },
    async getData(fetch_type) {
      this.SET_IS_LOADING(true);
      let result = await getWithdrawalLog({
        sort: "id desc",
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        userId: this.user_info.id,
      });
      if (result && result.data.code == 200) {
        if (fetch_type == "pullup") {
          this.withdrawal_log_list = [
            ...this.withdrawal_log_list,
            ...result.data.data.rows,
          ];
        } else {
          this.withdrawal_log_list = result.data.data.rows;
        }
        // this.withdrawal_log_list.sort(function (a, b) {
        //   return b.createTime - a.createTime;
        // });
        this.total = result.data.data.total;
        this.records = result.data.data.records;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t('locale.mobile.withdrawakLog.t13'));
      }
    },
  },
  activated() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    this.getData();
  },
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  created() {
    this.getData();
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
};
</script>

<style lang="scss" scoped>
.page-mobile_withdrawal_log {
  width: 7.2rem;
  min-height: 100vh;
  background-color: #f7f7fa;
  .footer {
      padding: 0.3rem;
      font-size: 0.26rem;
      color: #babec2;
      text-align: center;
      .tips {
        position: relative;
      }
      .tips::before {
        content: "";
        display: block;
        position: absolute;
        left: -1.7rem;
        top: 50%;
        transform: translateY(-1px);
        width: 1.5rem;
        height: 1px;
        background: #babec2;
      }
      .tips::after {
        content: "";
        display: block;
        position: absolute;
        right: -1.7rem;
        top: 50%;
        width: 1.5rem;
        transform: translateY(-1px);
        height: 1px;
        background: #babec2;
      }
    }
  .log_list {
    width: 7.2rem;
    border-top: 1px solid #ededf1;
    .list_item {
      width: 100%;
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ededf1;
      background: #ffffff;
      .item_left {
        width: 80%;
        font-size: .3rem;
      }
      .item_right {
        width: 20%;
        text-align: right;
        font-size: .26rem;
        .money {
          font-size: .3rem;
          color: #00C853;
        }
        .status {
          line-height: 1.4;
        }
      }
    }
  }
  .tips {
    text-align: center;
    line-height: 30px;
  }
}
</style>
<style lang="scss">

</style>
